<template>
       
    <div style="background-color: #f4f4f4">


      <!-- 顶部返回 -->
      <van-sticky>
      <van-nav-bar
        title="不凡"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>

    <!-- 头部导航 -->
    <van-tabs v-model="activeName" @click="an">
      <van-tab v-for="item in daohang.navData" :key="item.id" :title="item.name" :name="item.id" >
          <div class="title">
              <p class="p1">{{item.name}}</p>
              <p class="p2">{{item.front_desc}}</p>
          </div>



          <!-- 产品展示 -->

          <div class="logo">
               <router-link :to="`/home/${item2.id}`" tag="div" class="logo-1" v-for="item2 in demo" :key="item2.id" >
                  <img :src="item2.list_pic_url" alt="">
                  <p class="p3">{{item2.name}}</p>
                  <p class="p4">￥{{item2.retail_price}}</p>
               </router-link>
          </div>


      </van-tab>
      
    </van-tabs>
  </div>
</template>

    <script>
import { categoryNav} from "@/api/category/list";
import { goodsList} from "@/api/category/list/goodsList";

export default {
  data() {
    return {
      daohang: [],
      activeName:"",
      demo:[],
    };
  },
  computed: {},
  async created() {
    //http://localhost:8080/category/1008002?id=123     this.$route.query.id
    var result = await categoryNav({
      id: this.$route.params.ids,
     
    });
  
    this.daohang = result;
    this.activeName = result.currentNav.id;
  var demo = await goodsList({   
      categoryId: result.currentNav.id
    })
     console.log(demo);
this.demo = demo.data;

   
  },
  mounted() {},
  methods: {
       onClickLeft() {
      
      this.$router.push({
        name: "category"
      });
    },
   async an(id){
        var demo = await goodsList({   
      categoryId:id
    })
    console.log(demo);
    this.demo = demo.data;
    }
  },
};
</script>

    <style scoped lang="scss">
   .title{
       height: 71px;
       background-color: #fff;
       margin: 10px 0 2.5px;
       padding: 15px;

       .p1{
           color: #333;
           font-size: 15px;
           margin: 15px 0 9px;
       }
       .p2{
           color: #999;
           font-size: 12px;
           margin: 12px 0;
       }
   }


   .logo{
       width: 100%;
       height: 100%;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       padding-bottom: 50px;
       .logo-1{
           width: 186px;
           margin: 0 0 2.5px;
           padding: 7.5px 0;
           background-color: #fff;
          
           img{
               width: 151px;
               height: 151px;
               margin: 0 17px 0 17px;
           }

           .p3{
               color: #000;
               font-size: 12px;
               margin: 7px 0 11px;
               padding: 0 10px;
           }
           .p4{
               color: #B4282D;
               font-size: 15px;
               margin: 15px 0;
           }
       }
   }
</style>
